<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>学生成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>学生成绩评定</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域--> 
    <el-card>
      <el-table :data="subjectList" stripe>
        <el-table-column label="序号" type="index" width="100"></el-table-column>
        <el-table-column align="center" label="课题名称" prop="sub.name" width="300"></el-table-column>
        <el-table-column align="center" label="课题类型" >
          <template slot-scope="scope"> 
            <el-tag type="info">{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="选题学生"> 
          <template slot-scope="scope"> 
            <span>{{scope.row.stu.name}} ({{scope.row.stu.id}})</span>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="成绩评定">
          <template slot-scope="scope">
            <el-button circle icon="el-icon-edit" type="success" @click="scoreStudent(scope.row.stu.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
    <el-pagination background style="margin-left:42%"
      :current-page.sync="pageParam.currentPage" 
      :page-size.sync="pageParam.pageSize"
      @current-change="nowPage"
      layout="prev, pager, next" :total="total">
    </el-pagination>
    

     <!-- 成绩评定对话框 -->
    <el-dialog title="学生成绩评定" :visible.sync="dialogVisible" width="600px">
      <el-form label-width="120px" :model="scoreForm">
        <el-form-item label="评定状态">
          <el-tag :type="statusObj[scoreForm.status].type">{{statusObj[scoreForm.status].label}}</el-tag>
        </el-form-item>
        <el-form-item label="指导成绩"> 
          <el-input :readonly="scoreForm.status > 2" v-model="scoreForm.guideScore" 
            type="number" min="0" max="100" @blur="checkScore(scoreForm.guideScore)"></el-input>
        </el-form-item>
        <el-form-item label="互评成绩"> 
          <el-input :readonly="scoreForm.status > 2" v-model="scoreForm.commentScore" 
            type="number" min="0" max="100" @blur="checkScore(scoreForm.commentScore)" ></el-input>
        </el-form-item>
        <el-form-item label="答辩成绩"> 
          <el-input :readonly="scoreForm.status > 2" v-model="scoreForm.replyScore" 
            type="number" min="0" max="100" @blur="checkScore(scoreForm.replyScore)"></el-input>
        </el-form-item> 
        <el-form-item label="教师评语"> 
          <el-input v-model="scoreForm.teacherAdvice" type="textarea" rows="2" :readonly="scoreForm.status > 2"
            @blur="checkAdvise(scoreForm.teacherAdvice)" style="width:70%"></el-input> 
        </el-form-item> 
        <el-button v-if="scoreForm.status < 3" type="primary" round style="margin-left: 40%" @click="submitStudentScore">提交</el-button> 
      </el-form> 
    </el-dialog>
  </div>
</template>

<script>
  import {getTeacherSubjectListForScoreByPage,getTeacherSubjectListForScoreTotal} from '../../axios/subject'
  import {getScoreByStudentId, enterStudentScore} from '../../axios/score'
  export default {
    name: 'TeacherStudentScore',
    data(){
      return {
        pageParam:{currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1,
        subjectList: [],
        // 学生成绩评定对话框的 显示/隐藏
        dialogVisible: false,
        scoreForm: {
          status: 1,
        },
        statusObj: {
          1: { type: 'info', label: '未评定' },
          2: { type: 'warning', label: '待审核' },
          3: { type: 'danger', label: '未通过' },
          4: { type: 'success', label: '已通过' }
        }
      }
    },
    created(){
      this.getSubjectList()
      this.getSubjectTotal()
    },
    methods:{
      getSubjectTotal(){
        getTeacherSubjectListForScoreTotal().then(res => {
          if(res.success){
            this.total = res.data 
          } 
        })
      },
      getSubjectList(){
        // 发送后端请求，获取该教师的所有 subject 列表
        getTeacherSubjectListForScoreByPage(this.pageParam).then(res => {
          if(res.success){
            this.subjectList = res.data  
          } 
        })

        // 无后端模拟数据
        // this.subjectList = [
        //   {
        //     id: 1,
        //     stu: {id: 61091101, name: '张三'},
        //     tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'} ,
        //     sub: {
        //       id: 1,
        //       name: '前端模拟数据测试11111',
        //       introduce: '测试测试测试测试测试测试1111111',
        //       declareTime: '2021-01-21',
        //       source: {id: 1, label: '学生自拟'},
        //       type: {id: 1, label: '理论研究'},
        //       status: 1, 
        //       stuId: 61091101,
        //       teaId: 610911 
        //     }
        //   },
        //   {
        //     id: 2,
        //     stu: {id: 61091102, name: '李四'},
        //     tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'} ,
        //     sub: {
        //       id: 1,
        //       name: '前端模拟数据测试22222',
        //       introduce: '测试测试测试测试测试测试22222',
        //       declareTime: '2021-01-21',
        //       source: {id: 1, label: '学生自拟'},
        //       type: {id: 1, label: '理论研究'},
        //       status: 1, 
        //       stuId: 61091102,
        //       teaId: 610911 
        //     }
        //   }
        // ]
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getSubjectList()  
      },
      scoreStudent(stuId){ 
        console.log(this.scoreForm)
        
        // 发送后端请求，获取该学生的成绩评定信息，
        getScoreByStudentId(stuId).then(res => {
          if(res.success){  
            this.scoreForm = res.data
            this.dialogVisible = true
          } 
        })
        
        // // 无后端，模拟数据
        // this.scoreForm = { 
        //   stuId: 0,
        //   status:1,
        //   guideScore: 0, // 指导成绩
        //   commentScore: 0,
        //   replyScore: 0,// 答辩成绩
        //   teacherAdvice: ''
        // } 

        // this.scoreForm = { 
        //   stuId: 0,
        //   status:2,
        //   guideScore: 90, // 指导成绩
        //   commentScore: 90,
        //   replyScore: 90, // 答辩成绩
        //   teacherAdvice: '很不错'
        // } 
        // this.scoreForm.stuId = stuId
      },
      // 验证分数的合理性
      checkScore(val){
        let numReg = /^[0-9]+$/ 
        if (!numReg.test(val) || val > 100 || val < 0)  
          this.$message.warning('请输入[0-100]之间的数字 ')  
      },
      checkAdvise(advise){
        if(!advise){
          this.$message.warning('请输入教师评语') 
        }
      },
      submitStudentScore(){
        if(this.scoreForm.guideScore > 100 || this.scoreForm.guideScore < 0){
          this.$message.error('指导成绩不合法,请按要求输入!')
          return
        }
        if(this.scoreForm.commentScore > 100 || this.scoreForm.commentScore < 0){
          this.$message.error('互评成绩不合法,请按要求输入!')
          return
        }
        if(this.scoreForm.replyScore > 100 || this.scoreForm.replyScore < 0){
          this.$message.error('答辩成绩不合法,请按要求输入!')
          return
        }
        if(!this.scoreForm.teacherAdvice){
          this.$message.error('请输入教师评语')
          return
        }
        this.scoreForm.finalScore = Math.round(this.scoreForm.guideScore * 0.3 + this.scoreForm.commentScore * 0.3 + this.scoreForm.replyScore * 0.4)
        console.log(this.scoreForm)
        // 发送后端请求，将教师录入的成绩持久化，并将成绩状态改为待审核
        enterStudentScore(this.scoreForm).then(res => {
          if(res.success){
            this.$message.success('录入学生成绩成功')
            this.dialogVisible = false 
          } 
        })  
      }
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 70%
  }
</style>